<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <style>
    .reply{
      margin-top: 0px;
    }
    li{
      transition: .5s;
      overflow: hidden;
    }
    .handle{
      width: 40px;
      border: 1px solid #ccc;
      background: #fff;
      position: absolute;
      right: 10px;
      top: 1px;
      text-align: center;
    }
    .handle a{
      display: block;
      text-decoration: none;
    }
    .list-group-item .centence{
      padding: 0px 50px;
    }
    .user{
      font-size: 22px;
    }
  </style>
</head>
<body>
  <header class="site-header jumbotron">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <h1>请发表你对Vue的评论</h1>
        </div>
      </div>
    </div>
  </header>
<div class="container">
  <div class="col-md-4">
    <form action="" class="form-horizontal">
      <div class="form-group">
        <label>用户名</label>
        <input type="text" class="form-control" placeholder="用户名">
      </div>
      <div class="form-group">
        <label>评论内容</label>
        <textarea class="form-control" cols="30" rows="6" placeholder="评论内容"></textarea>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="button" class="btn btn-default pull-right">提交</button>
        </div>
      </div>
    </form>
  </div>
  <div class="col-md-8">
    <h3 class="reply">评论回复：</h3>
    <h2 >暂无评论，点击左侧添加评论！！！</h2>
    <ul class="list-group">

      <li class="list-group-item">
        <div class="handle">
          <a href="javascript:;">删除</a>
        </div>
        <p class="user"><span>Bob</span><span>说：</span></p>
        <p class="centence">这里的水太深，你把握不住。</p>
      </li>
    </ul>
  </div>

</div>
</body>
</html>
